import React, { useEffect, useState } from 'react';
import { SketchPicker } from 'react-color';
import style from './ColorPicker.css';

function ColorPicker({ color, onChange }){
    const [selectColor, setSelectColor] = useState({ color, show:false });
    const handleClick = ()=>{
        setSelectColor({ show:!selectColor.show })
    }
    const handleClose = ()=>{
        setSelectColor({ show:false })
    }
    const handleChange= ({ hex })=>{
        setSelectColor({ color:hex });
        if ( onChange ) onChange(hex);
    }
    return (
        <div>
            <div className={style.swatch} onClick={handleClick}>
                <div className={style.color} style={{ backgroundColor:color }} />
            </div>
            {selectColor.show ? (
                <div className={style.popover}>
                  <div className={style.cover} onClick={handleClose} />
                  <SketchPicker color={color} className={selectColor.color} onChangeComplete={handleChange} />
                </div>
            ) : null}
    </div>
    )
}

export default ColorPicker;